<template>
  <page-wrap
    :show-top="showTop"
    :dark="true"
    darkTxtColor="#222"
    back
    bg-color="#transparent"
    hideTab
    :title="dynamicTitle"
  >
    <view
      class="styleContainer"
      :style="{
        backgroundImage: 'url(' + srcBg + ')',
        'padding-top': navHeight + 'px',
      }"
    >
      <!-- <view :style="{ height: titleBarMarginTop }"></view> -->
      <view class="styleTopContainer">
        <!-- <view class="styleTitleContainer">
          <view class="styleTitleLeft">
            <image class="styleGoBack" :src="srcGoBack" @click="clickBack" v-if="pagesLength >= 2"></image>
            <image class="styleGoBack" :src="srcGoHome" @click="clickHome" v-else></image>
          </view>
        </view> -->
        <view class="aititle">
          <view
            class="aititle-text"
            :style="{
              transform: 'scale(' + scaleY + ')',
              opacity: opacity,
              transition: 'transform 0.3s ease, opacity 0.3s ease',
            }"
          >
            {{ showTop ? "" : "职业报告" }}</view
          >
          <view
            class="aititle-task"
            v-show="!showTop"
            :style="{
              transform: 'scale(' + scaleY + ')',
              opacity: opacity,
              transition: 'transform 0.3s ease, opacity 0.3s ease',
            }"
          >
            使用次数剩余
            <text class="aititle-on">{{ leftUseNum }}</text>
          </view>
        </view>
      </view>

      <TabsSwiper
        :tabList="tabList"
        ref="tabsSwiper"
        :current="current"
        bgColor="transparent"
        tabsWidth="412"
        marginLeft="10"
        :scale="barScale"
        @tabsChange="tabsChange"
      />
      <!-- 这个height不要碰 不然页面会大问题 -->
      <swiper
        class="swiper-box"
        :duration="200"
        :current="swiperCurrent"
        @transition="handleTransition"
        @animationfinish="handleAnimation"
        :style="{
          height: 'calc(100vh - ' + (45 + 38 + navHeight * 2) + 'rpx)',
        }"
      >
        <swiper-item class="swiper-item">
          <view
            class="styleSearchContainer"
            @click="clickSearch"
            v-if="!isInputMode"
          >
            <u-input
              class="styleInput"
              placeholder="搜索职业的名称"
              :focus="isFocus"
              v-model="inputText"
              :clearable="false"
              :placeholder-style="placeholderStyle"
              @click="clickInput"
              disabled
            />
            <image class="styleSearchIcon" :src="srcInputSearchIcon"></image>
          </view>
          <view class="styleSearchInputModeContainer" v-else>
            <u-input
              class="styleInput"
              placeholder="搜索职业的名称"
              :focus="inputModeIsFocus"
              v-model="inputModeText"
              :clearable="false"
              :placeholder-style="placeholderStyle"
              @input="onInputChanged"
              @blur="onBlur"
            />
            <view class="styleClearContainer">
              <image
                class="styleClearIcon"
                :src="srcInputSearchClose"
                @click="clickClear"
                v-if="isShowClear"
              ></image>
              <view class="styleCancelText" @click="clickCancel">取消</view>
            </view>
          </view>
          <view
            class="styleMajorList"
            v-if="isShowMajorList"
            :style="{ height: contentHeight }"
            @click="clickScrollView"
          >
            <view class="styleScrollView" scroll-y="true">
              <view
                class="styleItem"
                v-for="(item, index) in list"
                :key="index"
                @click="clickMajorItem(item)"
              >
                <rich-text
                  class="styleName"
                  :nodes="highLightText(item.positionName)"
                ></rich-text>
                <view class="styleLine"></view>
              </view>
              <view
                class="styleBottom"
                v-if="isShowMajorList && list.length > 0"
                >没有更多啦</view
              >
            </view>
          </view>

          <view
            class="styleEmpty"
            @click="clickEmptyPage"
            v-if="isShowEmpty"
            :style="{ height: contentHeight }"
          >
            没有找到符合的内容
          </view>
          <MainFilter
            v-if="isShowMajorFilter"
            ref="filterListRef"
            :cateType="majorListParam.cateType"
            :specialStyle="{ height: contentHeight }"
            :scrollEabled.sync="scrollEabled"
            :sign="productSign"
            @handlePositionSelect="handlePositionSelect"
          />
        </swiper-item>
        <swiper-item class="swiper-item whiteBg">
          <view id="swiper-item-1">
            <ResultList :reportList="reportList" />
          </view>
        </swiper-item>
      </swiper>
    </view>
    <view class="buyButton" v-if="productSign == 'ZHITU_TOC_SERVICE'">
      <template v-if="showPackageBtn">
        <view class="buyPackage" @click="showBuyList">
          职途权益套餐
          <view class="least-price" v-if="showLeastPrice == 0"></view>
        </view>
        <view class="buySingle" @click="handleBottomBtnClick"
          >单次购买 <view style="margin-left: 24rpx">￥</view>
          {{ leastPrice }}
          <view>/份 </view>
        </view>
      </template>
      <view v-else class="btn-box">
        <view class="check-btn" @click="handleBottomBtnClick"
          >单次购买 <text style="margin-left: 24rpx">￥</text>
          {{ leastPrice }}/份
        </view>
      </view>
    </view>
    <u-toast ref="uToast" />
    <ShoppingCar
      v-if="showPopup"
      :showPopup="showPopup"
      @closePopup="closePopup"
    ></ShoppingCar>
  </page-wrap>
</template>

<script>
import MainFilter from "./components/mainFilter.vue";
import ResultList from "./components/resultList.vue";
import TabsSwiper from "./components/TabsSwiper.vue";
import ShoppingCar from "../components/ShoppingCar.vue";
import { reqZhituGetCareer } from "@/api/modules/company.js";
import {
  getCareerQuizReport,
  careerQuizRelReportByRight,
  getCareerResearchReport,
  matchPositionListNew,
  addCartAndToOrder,
  addZhituPayOrder,
  getPersonRightNum,
  getCardRightPackage,
  getRightSingleProduct,
  getProductGroup,
} from "@/api/modules/career";

export default {
  components: {
    MainFilter,
    TabsSwiper,
    ResultList,
    ShoppingCar,
  },
  computed: {
    // 是否人企沟通
    isConsultant() {
      return getApp().globalData.loginStatus == "consultant";
    },
  },
  data() {
    return {
      showLeastPrice: 0,
      leastPrice: 0,
      rightProductId: "",
      rightSingleProductId: "",
      productSign: "",
      rightNumData: {},
      rightId: "",
      currentPackage: 0,
      showPopup: false,
      showTop: false,
      scrollEabled: false,
      navHeight: getApp().globalData.navHeight,
      dynamicTitle: "",
      pagesLength: 0,
      isFocus: false,
      inputModeIsFocus: true,
      inputText: "",
      inputModeText: "",
      degreeText: "本科",
      isInputMode: false,
      isShowClear: false,
      isShowMajorList: false,
      isShowEmpty: false,
      isShowMajorFilter: true,
      srcGoBack:
        this.$imgBaseSelf + "career/positionDictionary/major_go_back.webp",
      srcGoHome: this.$imgBaseSelf + "home-b.png",
      srcInputSearchIcon:
        this.$imgBaseSelf + "career/positionDictionary/input_search_icon.webp",
      srcMajorTriangle:
        this.$imgBaseSelf + "career/positionDictionary/major_triangle.webp",
      srcInputSearchClose:
        this.$imgBaseSelf + "career/positionDictionary/input_seach_close.webp",
      placeholderStyle:
        "color: rgba(0,0,0,0.25);font-weight:400;font-size:28rpx;",
      list: [],
      positionTree: [],
      loadingType: "nomore", //"normal",
      majorListParam: {
        cateType: "30",
        pageNo: 1,
        pageSize: 10,
        pages: 0,
      },
      statusBarHeight: 0,
      titleBarMarginTop: 0,
      contentHeight: 0,
      isHome: true,
      srcBg: this.$imgBaseSelf + "career/selectPositionBg.png",
      isShowBottom: false,
      personId: uni.getStorageSync("person-id").slice(2) || undefined,
      // personId: "19588465" || undefined,
      userNum: 0,
      rightCount: 0,
      selectedPageIndex: 0,

      tabList: [
        {
          name: "选职业看报告",
        },
        {
          name: "我的报告",
        },
      ],
      current: 0,
      swiperCurrent: 0,
      barScale: 1,
      swiperHeight: 400,
      screenWidth: 412,
      reportList: [],
      scaleY: 1, // 初始 scaleY，1 表示正常大小
      opacity: 1, // 初始 opacity,1 表示透明度
      provider: {},
      leftUseNum: 0, // 剩余次数
      showPackageBtn: false, // 是否显示套餐按钮
    };
  },
  created() {
    this.pagesLength = getCurrentPages().length;
    //获取支付提供商
    uni.getProvider({
      service: "payment",
      success: (res) => {
        this.provider = res.provider;
        console.log("this.provider", this.provider);
      },
    });
    //获取已经选择的职业报告
    // this.getCareerQuizReportFn();
  },
  async onShow() {
    await this.getCareerQuizReportFn();
    await this.getCardRightPackageFn();
    await this.getPersonRightNumFn();
    this.getProductGroupFn();
    this.getRightSingleProductFn();
  },
  onLoad(opt) {
    console.log("opt", opt);
    this.rightId = Number(opt.rightId);
    uni.setNavigationBarColor({
      frontColor: "#000000",
      backgroundColor: "",
    });
    this.rightCount = opt.rightCount || 4;
    this.userNum = opt.userNum || 0;
    //考虑顾问进入来看别人结果的情况，。。
    if (opt.rightPersonId) {
      this.personId = opt.rightPersonId;
      this.$nextTick(() => {
        let current = 1;
        this.$refs.tabsSwiper.$refs.tabs.setFinishCurrent(current);
        this.swiperCurrent = current;
        this.current = current;
      });
    }
    this.zhituGetStartInfo();
  },
  onPageScroll(e) {
    this.showTop = e.scrollTop >= 40;
    if (this.showTop) {
      this.getNum();
      this.dynamicTitle = `剩余次数${this.leftUseNum}`;
      this.scrollEabled = true;
    } else {
      this.dynamicTitle = "";
      this.scrollEabled = false;
    }
    if (e.scrollTop >= 0 && e.scrollTop <= 40) {
      // 计算 scaleY，使其在1到0之间变化
      this.scaleY = 1 - e.scrollTop / 60;
      // 计算透明度，使其在1到0之间变化
      this.opacity = 1 - e.scrollTop / 40;
    }
  },
  mounted() {
    this.getStatusBarHeight();
  },
  onReady() {
    this.current = this.rightCount == this.userNum ? 1 : 0;
    this.swiperCurrent = this.current;
  },

  methods: {
    getNum() {
      // c端用户和普通用户的获取剩余次数不一样
      if (this.productSign === "ZHITU_TOC_SERVICE") {
        this.leftUseNum = this.rightNumData.ownNum - this.rightNumData.useNum;
      } else {
        this.leftUseNum =
          this.rightCount - this.reportList.length < 0
            ? 0
            : this.rightCount - this.reportList.length;
      }
    },
    async getRightSingleProductFn() {
      const params = {
        cardType: uni.getStorageSync("cardType"),
        rightId: this.rightId,
      };
      const res = await getRightSingleProduct(params);
      if (res.code == 200) {
        this.rightSingleProductId = res.data.mallProductId;
        this.rightProductId = res.data.id;
        this.leastPrice = res.data.price;
      }
    },
    async getCardRightPackageFn() {
      const params = {
        cardType: uni.getStorageSync("cardType"),
      };
      const res = await getCardRightPackage(params);
      if (res.code == 200) {
        if (res.data.length) {
          this.productSign = res.data[0].productSign;
          this.showLeastPrice = res.data[0].isFree;
        }
      }
    },
    async getProductGroupFn() {
      const params = {
        personId: uni.getStorageSync("person-id").slice(2) || undefined,
        id: "1",
        unlockTypeList: [10, 20, 30, 40],
        productSignList: ["ZHITU_TOC_SERVICE"],
      };
      const res = await getProductGroup(params);
      if (res.code == 200) {
        this.showPackageBtn = !res.data.length || !!res.data[0].productList;
      }
    },
    async getPersonRightNumFn() {
      const params = {
        personId: uni.getStorageSync("person-id").slice(2),
        rightId: this.rightId,
        cardType: uni.getStorageSync("cardType"),
      };
      const res = await getPersonRightNum(params);
      if (res.code == 200) {
        this.rightNumData = res.data;
        this.getNum();
      }
    },
    closePopup() {
      this.showPopup = false;
    },
    //1.生成订单
    addCartAndToOrder() {
      uni.showLoading({
        title: "生成订单中...",
        mask: true,
      });
      addCartAndToOrder({
        orderType: "ZT_SERVICE",
        mallProductId: this.rightSingleProductId,
        channelType: 81,
        sourceType: 3,
        personId: uni.getStorageSync("person-id").slice(2) || undefined,
        rightId: this.rightId,
        cardType: uni.getStorageSync("cardType"),
        orderCondition: {
          rightProductId: this.rightProductId,
        },
      })
        .then((res) => {
          if (res.code == 200) {
            this.addZhituPayOrder(res.data);
          } else {
            uni.hideLoading();
            uni.showToast({
              title: res.status_desc || "生成订单失败",
              icon: "none",
              duration: 2000,
            });
          }
        })

        .catch((err) => {
          uni.hideLoading();
          uni.showToast({
            title: err.status_desc || "生成订单失败",
            icon: "none",
            duration: 2000,
          });
        })
        .finally(() => {});
    },
    //2.通过订单获取支付信息
    addZhituPayOrder(data) {
      addZhituPayOrder({
        ...data,
        orderType: "ZT_SERVICE",
        wayCode: "WX_LITE",
        personId: this.personId,
        personName: uni.getStorageSync("personName"),
        openid: uni.getStorageSync("openid"),
      })
        .then((res) => {
          console.log(res);
          if (res.code == 200) {
            this.requestPayment(res.data);
          } else {
            uni.hideLoading();
            uni.showToast({
              title: res.status_desc || "获取商品信息失败",
              icon: "none",
              duration: 2000,
            });
          }
        })
        .catch((err) => {
          uni.hideLoading();
          uni.showToast({
            title: err.status_desc || "获取商品信息失败",
            icon: "none",
            duration: 2000,
          });
        })
        .finally(() => {});
    },
    //3.使用支付信息调用支付
    requestPayment(data) {
      uni.hideLoading();
      if (this.provider.indexOf("wxpay") < 0) {
        return;
      }
      const payData = JSON.parse(data.payData);
      uni.requestPayment({
        provider: this.provider[0],
        timeStamp: payData.timeStamp,
        nonceStr: payData.nonceStr,
        package: payData.package,
        signType: payData.signType,
        paySign: payData.paySign,
        success: (res) => {
          uni.showToast({
            title: "购买成功",
            icon: "none",
            duration: 2000,
          });
          // 购买成功之后要刷新右上角次数
          this.getPersonRightNumFn();
        },
        fail: (err) => {
          uni.showToast({
            title: "支付失败,请您重新支付",
            icon: "none",
            duration: 3000,
          });
        },
      });
    },
    showBuyList() {
      console.log("这里点击展示购物车，购买套餐");
      this.showPopup = true;
      this.currentPackage = 0;
    },
    //还要订阅一下支付，退费相关信息
    handlePaySubscribe() {
      uni.requestSubscribeMessage({
        tmplIds: ["neXhGgVHV7JGNqQZOfu30pQmQcZIFUy73CBvK5OF98M"],
        complete: (res) => {
          Object.keys(res).forEach((key) => {
            if (res[key] === "accept") {
              this.addCartAndToOrder();
            }
          });
        },
      });
    },
    handleBottomBtnClick() {
      this.handlePaySubscribe();
    },
    //预览报告
    handleViewReport(item) {
      console.log("即将预览报告", item, this.reportList);
      // 如果报告购买过出现在reportList中则可以直接查看
      // 否则无论是否有剩余的权益次数都视作没有购买要用户在报告内部自己去解锁
      // 此种情况只适用于toc项目
      if (item) {
        if (this.productSign == "ZHITU_TOC_SERVICE") {
          let leftValue = this.rightNumData.ownNum - this.rightNumData.useNum;
          let isBuy = false;
          this.reportList.forEach((ele) => {
            if (ele.ylPositionId == item.ylPositionId) {
              isBuy = true;
            }
          });
          uni.navigateTo({
            url: `/pagesSub/career/careerReportDetail/index?showLeastPrice=${this.showLeastPrice}&showPackageBtn=${this.showPackageBtn}&ylPositionId=${item.ylPositionId}&positionName=${item.positionName}&isBuy=${isBuy}&leftValue=${leftValue}`,
          });
        } else {
          let isBuy = true;
          uni.navigateTo({
            url: `/pagesSub/career/careerReportDetail/index?showLeastPrice=${this.showLeastPrice}&showPackageBtn=${this.showPackageBtn}&ylPositionId=${item.ylPositionId}&positionName=${item.positionName}&isBuy=${isBuy}`,
          });
        }
      }
    },
    //选择职业报告
    handlePositionSelect(positionId) {
      //判断如果有点击的就直接去预览
      const ifReport = this.reportList.find(
        (item) => item.ylPositionId == positionId
      );
      if (ifReport) {
        this.handleViewReport(ifReport);
        return;
      }
      this.isLoading = true;

      // 这个是toc逻辑
      if (this.productSign == "ZHITU_TOC_SERVICE") {
        const params = {
          reportType: "career_report",
          ylPositionId: positionId,
        };
        getCareerResearchReport(params)
          .then((res) => {
            if (res.code == 200) {
              uni.showToast({
                title: "选择职业报告成功",
                icon: "none",
              });
              res.data.positionName = res.data.reportName;
              this.handleViewReport(res.data);
            } else {
              uni.showToast({
                title: res.status_desc || "选择职业报告失败",
                icon: "none",
              });
            }
          })
          .catch((e) => {
            uni.showToast({
              title: "选择职业报告失败",
              icon: "none",
            });
          })
          .finally(() => {
            this.show = false;
          });
      } else {
        // 不是toc就走以前的老逻辑
        const params = {
          dataId: this.personId,
          dataType: 1, // 职途职业测评
          templateCode: "career_report",
          ylPositionId: positionId,
        };
        careerQuizRelReportByRight(params)
          .then((res) => {
            if (res.code == 200) {
              uni.showToast({
                title: "选择职业报告成功",
                icon: "none",
              });
              this.handleViewReport(res.data);
            } else {
              uni.showToast({
                title: res.status_desc || "选择职业报告失败",
                icon: "none",
              });
            }
          })
          .catch((e) => {
            uni.showToast({
              title: "选择职业报告失败",
              icon: "none",
            });
          })
          .finally(() => {
            this.show = false;
          });
      }
    },
    //获取已经选择的职业报告
    async getCareerQuizReportFn() {
      const params = {
        dataId: this.personId,
        dataType: 1,
        templateCode: "career_report",
      };
      const res = await getCareerQuizReport(params);
      if (res.code == 200 && Array.isArray(res.data)) {
        this.reportList = res.data;
      }
    },
    tabsChange(index) {
      this.swiperCurrent = index;
    },
    handleTransition(e) {
      let dx = e.detail.dx;
      this.$refs.tabsSwiper.$refs.tabs.setDx(dx);
    },
    handleAnimation(e) {
      let current = e.detail.current;
      this.$refs.tabsSwiper.$refs.tabs.setFinishCurrent(current);
      this.swiperCurrent = current;
      this.current = current;
    },
    getStatusBarHeight() {
      const res = uni.getSystemInfoSync();
      this.statusBarHeight = res.statusBarHeight;
      this.titleBarMarginTop = this.statusBarHeight + "px";
      const screenHeight = res.windowHeight;
      this.contentHeight =
        screenHeight - uni.upx2px(196) - this.statusBarHeight + "px";
    },
    clickBack() {
      uni.navigateBack();
    },
    clickHome() {
      uni.switchTab({
        url: "/pages/index/index",
      });
    },
    clickSearch() {
      this.isInputMode = true;
      this.isShowMajorFilter = false;
      this.srcBg =
        this.$imgBaseSelf + "career/positionDictionary/bg_major_search.webp";
    },
    clickInput() {
      this.isInputMode = true;
      this.isShowMajorList = true;
      this.isShowBubble = false;
      this.isShowMajorFilter = false;
      this.srcBg =
        this.$imgBaseSelf + "career/positionDictionary/bg_major_search.webp";
    },
    clickClear() {
      this.inputModeText = "";
      this.isShowClear = false;
      this.isShowEmpty = false;
      this.loadingType = "nomore"; //"normal";
      this.majorListParam.pageNo = 1;
      this.list = [];
      this.isShowMajorFilter = false;
      this.srcBg =
        this.$imgBaseSelf + "career/positionDictionary/bg_major_search.webp";

      this.inputModeIsFocus = false;
      setTimeout(() => {
        this.inputModeIsFocus = true;
      }, 0);
    },
    clickCancel() {
      this.isShowMajorList = false;
      this.isInputMode = false;
      this.inputModeText = "";
      this.isShowEmpty = false;
      this.isShowClear = false;
      this.list = [];
      this.isShowMajorFilter = true;
      this.srcBg =
        this.$imgBaseSelf +
        "career/positionDictionary/bg_major_searchhome.webp";
    },
    onInputChanged(value) {
      this.loadingType = "normal";
      this.majorListParam.pageNo = 1;
      if (value && value.length > 0) {
        this.isShowClear = true;
        if (this.positionTree.length == 0) {
          this.zhituGetStartInfo();
        } else {
          this.zhituHandleSearchOn(value);
        }
      } else {
        this.isShowClear = false;
        this.isShowEmpty = false;
        this.list = [];
      }
    },

    // 获取职业列表(数据写死固定的)
    zhituGetStartInfo() {
      if (this.isLoading) {
        return;
      }
      this.isLoading = true;
      let params = {
        personId: this.personId,
      };
      reqZhituGetCareer(params)
        .then((res) => {
          this.isLoading = false;
          if (res.code == 200) {
            this.positionTree = res.data.positionTree;
            if (this.inputModeText) {
              this.zhituHandleSearchOn(this.inputModeText);
            }
          } else {
            uni.showToast({
              title: res.status_desc,
              icon: "error",
            });
          }
        })
        .catch((err) => {
          this.isLoading = false;
        });
    },
    zhituHandleSearchOn(key) {
      const params = { matchName: key, pageNo: 1, pageSize: 999 };
      matchPositionListNew(params)
        .then((res) => {
          if (res.code == 200) {
            this.list = res.data;
          }
        })
        .catch((e) => {
          console.log(e);
        });
    },

    onRefresh() {},
    onScroll(event) {},
    highLightText(content) {
      if (!content) {
        return;
      }
      const regex = new RegExp(this.inputModeText, "gi");
      const highlightedText = content.replace(
        regex,
        '<span style="color:#F75A3E;">' + this.inputModeText + "</span>"
      );
      return highlightedText;
    },
    clickEmptyPage() {
      // console.log("clickEmptyPage");
      this.isInputMode = false;
      this.inputModeText = "";
      this.isShowEmpty = false;
      this.isShowClear = false;
      this.clickCancel();
    },
    clickMajorItem(item) {
      if (this.isConsultant) {
        //顾问身份进入这个页面不能进行选择
        uni.showToast({
          title: "顾问身份无法选择报告",
          duration: 2000,
          icon: "none",
        });
        return;
      }
      this.handlePositionSelect(item.positionId || item.ylPositionId);
    },

    onBlur() {},
    clickScrollView() {
      if (this.list.length <= 0) {
        this.clickCancel();
      }
    },
  },
};
</script>
<style lang="scss" scoped>
$img-base-careerPath: $img-base + "careerPath/";

@keyframes animationScale {
  from {
    transform: scale(0);
    //从左上角开始缩放
    transform-origin: left top;
  }

  to {
    transform: scale(1);
  }
}

.styleContainer {
  // background: linear-gradient(180deg, #EFF4FF 0%, #FFFFFF 100%);
  //   background-image: url($img-base + "career/positionDictionary/bg_major_search.webp");
  background-size: 100% 100%;
  height: 100vh;

  .swiper-box {
    // height: calc(100vh - 323rpx);
    background: linear-gradient(180deg, #ffffff 0%, #f4f6f8 30%);
    // background: red;
    border-radius: 32rpx 32rpx 0rpx 0rpx;
    padding-top: 20rpx;

    .whiteBg {
      background-color: white;
    }
    .swiper-item {
      background: #fff;
    }
  }

  .styleSearchContainer {
    display: flex;
    position: relative;
    height: 80rpx;
    background-color: #f4f6f8;
    margin-left: 32rpx;
    margin-right: 32rpx;
    // box-shadow: 0rpx 0rpx 18rpx 0rpx rgba(114, 165, 195, 0.3);
    border-radius: 16rpx;
    // filter: blur(0px);
    margin-top: 15rpx;
    margin-bottom: 4rpx;

    .styleInput {
      height: 80rpx;
      margin-left: 28rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100vw; // width: 100%;
      margin-right: 80rpx;
    }

    .styleSearchIcon {
      position: absolute;
      top: 50%;
      right: 28rpx;
      transform: translateY(-50%);
      width: 40rpx;
      height: 40rpx;
    }

    .overlay {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
    }
  }

  .styleSearchInputModeContainer {
    display: flex;
    position: relative;
    height: 80rpx;
    background-color: #f4f6f8;
    margin-left: 32rpx;
    margin-right: 32rpx;
    // box-shadow: 0rpx 0rpx 18rpx 0rpx rgba(114, 165, 195, 0.3);
    border-radius: 16rpx;
    filter: blur(0px);
    margin-top: 15rpx;
    margin-bottom: 4rpx;

    .styleInput {
      height: 80rpx;
      margin-left: 28rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100vw; // width: 100%;
      margin-right: 140rpx;
    }

    .styleClearContainer {
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      position: absolute;
      top: 50%;
      right: 28rpx;
      transform: translateY(-50%);

      .styleClearIcon {
        width: 32rpx;
        height: 32rpx;
      }

      .styleCancelText {
        font-weight: 400;
        color: #888888;
        line-height: 36rpx;
        font-size: 28rpx;
        margin-left: 12rpx;
      }
    }
  }
}

.buyButton {
  position: fixed;
  bottom: 76rpx;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: space-around;
  width: calc(100vw - 80rpx);
  height: 100rpx;
  margin: 0 40rpx;
  z-index: 999;

  /* background: #ffffff; */
  .buyPackage,
  .buySingle {
    width: 328rpx;
    height: 88rpx;
    border-radius: 44rpx;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
  }

  .buyPackage {
    position: relative;
    font-family: PingFangSC, PingFang SC;
    font-weight: 500;
    font-size: 28rpx;
    color: #ffe0a1;
    line-height: 36rpx;
    background: linear-gradient(270deg, #38342b 0%, #413f3f 100%);

    .least-price {
      position: absolute;
      width: 132rpx;
      height: 34rpx;
      background-image: url($img-base-careerPath + "jobtestLeastPrice.png");
      background-repeat: no-repeat;
      background-size: 100% 100%;
      top: -16rpx;
      left: 64rpx;
    }
  }

  .buySingle {
    font-family: PingFang-SC, PingFang-SC;
    /* font-weight: 800; */
    font-size: 32rpx;
    color: #ffffff;
    line-height: 44rpx;
    background-color: #ff711e;

    view {
      font-size: 24rpx;
    }
  }
}

.btn-box {
  width: calc(100vw - 64rpx);
  display: flex;
  justify-content: center;
  position: fixed;
  bottom: 76rpx;
  left: 32rpx;
  .check-btn {
    color: #ffffff;
    font-size: 32rpx;
    font-weight: 600;
    width: 100%;
    height: 88rpx;
    line-height: 88rpx;
    text-align: center;
    border-radius: 44rpx;
    background: #f75a3e;
  }
}

.styleMajorList {
  background-color: transparent;
  margin-top: 12rpx;

  .styleScrollView {
    height: calc(100vh - 400rpx);
    padding-bottom: 200rpx;
    display: flex;
    flex-direction: column;
    overflow: scroll;

    .styleItem {
      display: flex;
      flex-direction: column;
      width: 100vw;
      justify-content: center;

      .styleName {
        font-weight: 400;
        color: #222222;
        line-height: 40rpx;
        font-size: 30rpx;
        margin-top: 36rpx;
        margin-left: 32rpx;
        margin-right: 32rpx;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
      }

      .styleDesciption {
        font-weight: 400;
        color: #888888;
        line-height: 40rpx;
        margin-top: 16rpx;
        margin-left: 32rpx;
        margin-right: 32rpx;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
      }

      .styleLine {
        margin-left: 32rpx;
        margin-right: 32rpx;
        height: 2rpx;
        background: #dde7f9;
        margin-top: 36rpx;
      }
    }

    .styleBottom {
      // background-color: transparent;
      // height: 50rpx;
      margin-top: 20rpx;
      text-align: center;
    }
  }
}

.styleTopContainer {
  .aititle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 76rpx;
    transform-origin: top;

    /* 设置变换的基点为顶部 */
    &-text {
      margin-left: 32rpx;
      margin-top: 16rpx;
      font-size: 44rpx;
      font-weight: 800;
      color: #000000;
      line-height: 60rpx;
    }

    &-task {
      margin-right: 32rpx;
      font-size: 26rpx;
      font-weight: 400;
      color: #666666;
      line-height: 36rpx;
    }

    &-on {
      margin-left: 16rpx;
      font-size: 48rpx;
      font-weight: 800;
      color: #333333;
    }
  }

  .styleTitleContainer {
    height: 88rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .styleTitleLeft {
      flex: 1;

      .styleGoBack {
        width: 44rpx;
        height: 44rpx;
        margin-left: 32rpx;
      }
    }

    .styleTitleCenter {
      flex: 1;
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;

      .styleTitleContent {
        font-weight: 800;
        color: #222222;
        line-height: 44rpx;
        font-size: 32rpx;
      }

      .styleTitleDegree {
        font-weight: bold;
        display: flex;
        flex-direction: row;
        border-radius: 6rpx;
        background: #ffffff;
        margin-left: 12rpx;
        padding-top: 10rpx;
        padding-bottom: 10rpx;
        padding-left: 12rpx;
        padding-right: 12rpx;
        align-items: center;
        justify-content: center;
        font-size: 24rpx;

        .styleTitleTriangle {
          width: 12rpx;
          height: 9rpx;
          margin-left: 8rpx;
        }
      }
    }

    .styleTitleRight {
      flex: 1;
    }
  }

  .styleEmpty {
    width: 100vw;
    height: calc(100vh - 266rpx);
    font-weight: 400;
    color: #222222;
    line-height: 36rpx;
    font-size: 28rpx;
    text-align: center;
    padding-top: 48rpx;
  }
}

.styleHasAnimation {
  animation: animationScale 0.5s ease-in-out alternate;
}
</style>
